DAY4:加入少許JS讓他看起來生動一點點

我們先創建一個js的檔案就給他取叫app吧

然後引入 引入方式如下圖

以下是js內的程式碼

const saluteTextContainer = document.querySelector(".saluteTextContainer");
const saluteImgContainer = document.querySelector(".saluteImgContainer");
//這個querySelectorAll 是找全部一樣的,不是像上面找到一個
const jobTitleContainers = document.querySelectorAll(".jobTitleContainer");
const jobTitles = document.querySelectorAll(".jobTitle");


window.addEventListener("scroll", () => {
  let offsetY = window.scrollY
  saluteTextContainer.style.transform = `translateY(${offsetY * 0.1}px)`
  // 設置 'saluteImgContainer' 元素的水平和垂直平移效果，根據 'offsetY' 的值
  //水平移動的距離是 'offsetY * 0.4' 像素，垂直移動的距離是 'offsetY * 0.7' 像素
  saluteImgContainer.style.transform = `translate(${offsetY * 0.4}px , ${offsetY * 0.7}px)`
  jobTitleContainers[0].style.backgroundPositionY = `${offsetY * 0.5}px`
  jobTitleContainers[1].style.backgroundPositionY = `${-offsetY * 0.5}px`
  jobTitles[0].style.transform = `translateX(calc(220vh - ${offsetY}px))`
  jobTitles[1].style.transform = `translateX(calc(-250vh + ${offsetY}px))`
  projecstTitle.style.transform = `translateY(calc(400vh - ${offsetY}px))`
})

太好了！現在你已經設置了視差滾動效果，你可以嘗試滾動網頁，看看這些元素是如何根據滾動位置變得更生動的。這種視覺效果可以使你的網頁更加有趣和引人入勝。繼續實踐，你會發現網頁開發有著無限的創造和娛樂可能性！如果有其他問題或需要幫助，請隨時向我提問。加油！